$.namespace('grid');


grid = function() {
	var urlPath = '';
	
	return {
		init : function() {
			EasyUIInit.initControls([grid.config.grid,grid.config.dialog,grid.config.mapdialog]); 
		},
		
		showForm : function() {
			$('#fmDlg').show().dialog('open');
			$('#fm').form('clear');
			urlPath = ctxRest + '/gcb/grid/create';
		},
		
		showEditForm : function() {
			var row = $('#grid').datagrid('getSelected');
			if (!row) {
				$.messager.alert('提示', '请选择要修改的数据.', 'info');
				return;
			}
			urlPath = ctxRest + '/gcb/grid/update';
			$('#fmDlg').show().dialog('open');
			$('#fm').form('load', row);
			$('#butRegion').linkbutton({text:"【区域设置】"});
			
			//在grid显示取色器的颜色
			$('#bgColor').change();
			$('#lineColor').change();
		},
		
		getFormData : function(){
			var obj;
			var form = $('#fm');
			if (form.form('validate')) {
				obj = $.serializeObject(form);
			}
			return obj;
		},
		
		saveOrupdate : function()
		{
			var obj = grid.getFormData();
			
			console.log(obj);
			if (obj) {
				$.ajax({
					type : 'POST',
					url : urlPath,
					data : JSON.stringify(obj),
					contentType : 'application/json;charset=UTF-8',
					success : function(result){
						if (result && result.errcode == 0) {
							$('#fmDlg').dialog('close');
							$('#grid').datagrid('reload');
						}
						else if (result.errcode == 1){
							$.messager.alert('提示', result.msg, 'info');
						}
					}
				})
			}
		},
		
		remove : function() {
			var row = $('#grid').datagrid('getSelected');
			if (!row) {
				$.messager.alert('提示', '请选择要删除的数据.', 'info');
				return;
			}
			$.messager.confirm('提示', '您确定要删除?', function(flag){
				if (flag) {
					
					$.ajax({
						type : 'GET',
						contentType : 'application/json;charset=UTF-8',
						url : ctxRest + '/gcb/grid/delete?id=' + row.id,
						success : function(result){
							$('#grid').datagrid('reload');
						}
					});
				}
			});
		}	,
		// 区域选择窗口
		openMap : function() {
			$('#mapDlg').dialog('open');
			var point = $('#center').val();
			var id = $('#id').val();
		  
			var iframe = document.getElementById('mapFrame');
			iframe.src = ctx + '/page/map/map?load=parent.grid.getGridData&id='+id+'&drawMode=POLYGON&pos='+point+'&t=' + (new Date().getTime());//?load=getTestData&edit=0&drawMode=POLYGON
			
		},
		getGridData:function(id){
			if (id==undefined) id= '';
			var ret = {
					editItemID : id,
					overlays : []};
			
			
			var rows = $('#grid').datagrid('getRows');
			
			for (var i = 0 ;i<rows.length;i++)
			{	
				var overlay={id:'',type:'POLYGON',points:[]};
				
				try{
					if (rows[i].region.length>0)
					eval('overlay='+rows[i].region);
				}
				catch(e){;}
				
				overlay.id=rows[i].id;			
				
				var center=rows[i].center;
				if (center.length>0)   overlay.center=center.split(',');
				overlay.text=rows[i].name;
				overlay.strokeWeight= rows[i].lineWidth;
				overlay.strokeColor=  rows[i].lineColor;
				overlay.fillColor= rows[i].bgColor;
				ret.overlays[ret.overlays.length]= overlay;
			}
			return ret;	
		}
	}
}();


grid.config = {
	grid : {
		id : "grid",
		type : "easyui-datagrid",
		option : {
			//title : '广场列表',//名称在菜单里面定义
			border:false,
			url : ctx + '/rest/gcb/grid/findList',
			contentType : 'application/json;charset=utf-8',
			idField : 'id',
			fitColumns : true,
			toolbar:"#toolbar",
			pagination : false,
			columns : [ [ {
				title : 'id',
				field : 'id',
				hidden: 'true',
				width : 30
			},{
				title : 'pid',
				field : 'pid',
				hidden: 'true',
				width : 30
			},{
				title : '编号',
				field : 'code',
				width : 30
			}, {
				title : '名称',
				field : 'name',
				width : 100
			}, {
				title : '功能',
				field : 'remark',
				width : 100
			},{
				title : '硬地绿化面积',
				field : 'greenArea',
				width : 50
			}, {
				title : '水面面积',
				field : 'waterArea',
				width : 50
			},  {
				title : '背景颜色',
				field : 'bgColor',
				formatter : function(value, row, index){
					var s = '<div>';
					s += '<div style="float:right;width:100%;height:100%;background:'+value+'">&nbsp;</div>';
					s += '<div style="clear:both"></div>';
					s += '</div>';
					return s;
				},
				width : 20
			}, {
				title : '线色',
				field : 'lineColor',
				formatter : function(value, row, index){
					var s = '<div>';
					s += '<div style="float:right;width:100%;height:100%;background:'+value+'">&nbsp;</div>';
					s += '<div style="clear:both"></div>';
					s += '</div>';
					return s;
					
				},
				width : 20
			} ] ],
			
			toolbar: [{
				text:'增加',
				iconCls: 'icon-add',
				handler: grid.showForm,
			},'-',{
				text:'修改',
				iconCls: 'icon-edit',
				handler: grid.showEditForm,
			},'-',{
				text:'删除',
				iconCls: 'icon-remove',
				handler: grid.remove,
			}],
			
			onDblClickRow : grid.showEditForm
		}

	},
	dialog : {
		id : 'fmDlg',
		type : 'easyui-dialog',
		style : 'padding:5px;',
		option : {
			title : '广场信息',
			width : 380,
			height : 420 ,
			closed : true,
			buttons:[{
				text:'保  存',
				width:60,
				height:30,
				handler:grid.saveOrupdate
			},{
				text:'关  闭',
				width:60,
				height:30,
				handler:function(){
					$('#fmDlg').dialog('close');
				}
			}]
		},
		controls:[{
		  		id : 'fm',
				type : 'form',
				isExternal:true,
				style : 'padding:5px;',   
				layout : {
					captionWidth : 90,
					fieldWidth : 80,
					fieldHeight : 30,
					rowHeight : 38,
					columns : 2,
					controls : [
					            {id:'id',type:'input',isExternal:true,attr:'hidden=true',colspan:0},
					            {id:'region',type:'input',isExternal:true,attr:'hidden=true',colspan:0},
					            {id:'pid',type:'input',isExternal:true,attr:'hidden=true',colspan:0},
					            {id:'code',caption:'广场编号',colspan:2,type:'easyui-textbox',option:{required:true,validType:['length[0,20]'],invalidMessage:'最大长度为20！'}},
					            {id:'name',caption:'广场名称',colspan:2,type:'easyui-textbox',option:{required:true,validType:['length[0,50]'],invalidMessage:'最大长度为20！'}},
					            {id:'remark',caption:'广场功能',colspan:2,type:'easyui-textbox',colspan:2,option:{required:true,validType:['length[0,100]'],invalidMessage:'最大长度为100！'}},


					            {id:'lineWidth',caption:'线条宽度',colspan:2,type:'easyui-numberspinner'},
					            {id:'greenArea',caption:'硬地绿化面积',colspan:2,type:'easyui-numberspinner'},
					            {id:'waterArea',caption:'水面面积',colspan:2,type:'easyui-numberspinner'},
					            {id:'bgColor',caption:'背景色',type:'input',isExternal:true,option:{required:true,}},
					            {id:'lineColor',caption:'线条颜色',type:'input',isExternal:true,option:{required:true}},
					            {id:'butRegion',colspan:2,captionVisible:false,caption:'区域',type:'easyui-linkbutton',option:{
					            	required:true,
					            	editable:false,
					            	plain:false,
					            	text : '【区域设置】',
					            	onClick:function(){grid.openMap();}}
					            	//icons:[{iconCls:'Applicationviewlist',handler:function(){grid.openMap();}}]}
					            },
					            {id:'center',caption:'广场中心',type:'input',attr:'hidden=true',colspan:0},
					            {id:'textCenter',caption:'文字中心',type:'input',attr:'hidden=true',colspan:0},
					            {id:'status',caption:'状态',type:'input',attr:'hidden=true',colspan:0}
					            ]
				}
		}]
	} ,
	mapdialog : {
		id : 'mapDlg',
		type : 'easyui-dialog',
		style : 'padding:0px;',
		option : {
			title : '设置广场区域',
			modal : true,
			closed : true,
			maximizable : true,
			width : '99%',
			height : '99%',
			buttons : [
				{
					text : '取消',
					iconCls : 'icon-undo',
					handler : function() {
						$('#mapDlg').dialog('close');
					}
				},
				{
					text : '确定',
					iconCls : 'icon-ok',
					handler : function() {
						
						var region = document.getElementById("mapFrame").contentWindow.mapPosition.getRegion();
						var point = document.getElementById("mapFrame").contentWindow.mapPosition.getPosition();
						//$('#region').textbox('setValue', region);
						$('#region').val(region);
						
						//link button上显示region
						//$('#region').linkbutton({text:region});
						
						$("#center").val(point) ;
						$('#mapDlg').dialog('close');
					}
				} 
			]
		},
		controls:[{
			id : 'mapFrame',
			type : 'iframe',
			style:'width:100%;height:100%;border:0',
			attr:" marginwidth='0' marginheight='0' scrolling='no'"
		}]
	}
};


$(function() {
	grid.init();
	$('#bgColor').colorPicker();
	$('#lineColor').colorPicker();
})
